<template>
  <div class="container">
    <button @click="fetchData">获取数据</button>
    <button @click="fetchMockData">获取Mock数据</button>
    <div v-if="loading" class="loading">加载中...</div>
    <div v-else class="data">{{ data }}</div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      data: null,
      loading: false,
    };
  },
  methods: {
    async fetchData() {
      this.loading = true;
      try {
        const response = await axios.get(
          //"/api/web-display-server/webDisplayServerHelloWorld/sayHelloWorld2"
          "/web-display-demo/user/getUserList"
        );
        this.data = response.data;
      } catch (error) {
        console.error("请求出错:", error);
      } finally {
        this.loading = false;
      }
    },
    async fetchMockData() {
      this.loading = true;
      try {
        //const response = await axios.get("/mock/api/menu");
        const response = await axios.get("/mock/api/menu", { baseURL: "" });
        console.info(response);
        this.data = response.data;
      } catch (error) {
        console.error("请求出错:", error);
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  gap: 10px; /* 按钮之间的间距 */
  align-items: flex-start; /* 左对齐 */
  padding: 20px;
}

button {
  padding: 8px 16px;
  font-size: 16px;
  border: none;
  background-color: #409eff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #66b1ff;
}

.loading {
  margin-top: 10px;
  color: #f56c6c;
  font-size: 14px;
}

.data {
  margin-top: 10px;
  font-size: 16px;
  color: #333;
}
</style>
